<template>
    <div class="wrapper">
        <el-divider content-position="left">按钮组件</el-divider>
        <template v-if="buttons.length <= 0">
            <el-empty description="暂无组件">
                <el-button type="primary" @click="handleAdd">立即添加</el-button>
            </el-empty>
        </template>
        <template v-else>
            <div style="text-align: right;padding: 5px 0;">
                <el-button link type="primary" icon="plus" @click="handleAdd">新增</el-button>
                <el-button link type="primary" icon="edit" @click="handleUpdate"
                    :disabled="!Boolean(radioValue)">编辑</el-button>
                <el-button link type="danger" icon="delete" @click="handleDelete"
                    :disabled="!Boolean(radioValue)">删除</el-button>
            </div>
            <div class="wrapper-content">

                <div class="components">
                    <el-radio-group v-model="radioValue" @change="radioChange">
                        <el-radio v-for="button in buttons" border :value="button.id">{{ button.name }}</el-radio>
                    </el-radio-group>
                </div>
                <div class="info">
                    <el-divider content-position="left">组件信息</el-divider>
                    <el-form :model="currentItem" ref="form" label-width="80px" :inline="true" disabled>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="按钮名称">
                                    <el-input v-model="currentItem.name"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="功能标识" prop="funcKey">
                                    <template #label>
                                        <span>
                                            <el-tooltip content="用来代表功能的唯一标识符，如：feature:menu" placement="top">
                                                <el-icon><question-filled /></el-icon>
                                            </el-tooltip>
                                            功能标识
                                        </span>
                                    </template>
                                    <el-input v-model="currentItem.funcKey" placeholder="请输入功能标识" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="perm">
                                    <el-select-v2 v-model="currentItem.perm" maxlength="100" filterable remote multiple
                                        collapse-tags collapse-tags-tooltip :options="perm" placeholder="请输入接口权限串">
                                        <template #prefix>
                                            <el-icon>
                                                <search />
                                            </el-icon>
                                        </template>
                                        <template #default="{ item }">
                                            <span style="margin-right: 8px">{{ item.text }}</span>
                                            <span style="color: var(--el-text-color-secondary); font-size: 13px">
                                                {{ item.value }}
                                            </span>
                                        </template>
                                    </el-select-v2>
                                    <template #label>
                                        <span>
                                            <el-tooltip content="接口管理中定义的接口权限，如：system:user:list，也可以自定义前端接口权限"
                                                placement="top">
                                                <el-icon><question-filled /></el-icon>
                                            </el-tooltip>
                                            接口权限
                                        </span>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态">
                                    <el-radio-group v-model="currentItem.isActive">
                                        <el-radio v-for="dict in sys_normal_disable" :key="dict.value"
                                            :value="dict.value">{{
                                                dict.label
                                            }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </template>
    </div>
</template>

<script setup>
const buttons = defineModel({
    type: Array,
    default: [],
})

const props = defineProps({
    perm: {
        type: Array,
        default: [],
    }
})



const emits = defineEmits(['actionEvent'])
const { proxy } = getCurrentInstance();
const { sys_show_hide, sys_normal_disable } = proxy.useDict("sys_show_hide", "sys_normal_disable");
const radioValue = ref();

const currentItem = ref({});

// 监听 buttons 的变化
watch(buttons, (newButtons) => {
    if (newButtons.length > 0) {
        currentItem.value = newButtons[0];
        radioValue.value = currentItem.value.id
    } else {
        currentItem.value = {};
        radioValue.value = undefined;
    }
}, {
    immediate: true // 立即执行一次回调，确保初始值也能正确处理
});

const radioChange = (item) => {
    currentItem.value = buttons.value?.find(s => s.id == item);
}

const handleAdd = () => {
    emits('actionEvent', 'add', undefined);
}

const handleUpdate = () => {
    emits('actionEvent', 'update', currentItem.value);
}

const handleDelete = () => {
    emits('actionEvent', 'delete', currentItem.value);
}

</script>

<style lang="scss" scoped>
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;

    .wrapper-content {
        flex: 1;
        display: flex;

        .components {
            flex-basis: 40%;
            overflow-y: auto;

            .el-radio-group .el-radio {
                margin-top: 10px;
            }
        }

        .info {
            overflow-y: auto;
            height: 100%;
            flex: 1;
            border-left: 1px solid white;
        }
    }
}
</style>